<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>微博发布</title>
     <style type="text/css">
         *{margin: 0;padding: 0;list-style: none;}
         .all{  width: 600px;  border: 1px solid #000;  margin: 100px auto;  padding: 10px;  }
         .all textarea{  width: 480px;  height: 165px;  resize: none;  border: 1px solid #cccccc;  }
         .all span{position: relative;top:-5px; font-size: 12px;}
         .all button{position: relative;top: -5px; padding: 0 10px;}
         .all ul{  width: 480px;  margin: 0 auto;  }
         .all ul li{ margin-top:5px;border-bottom: 1px dashed #ccc; line-height: 20px;word-break: break-all;word-wrap: break-word;  }
         .all ul button{  padding: 0 5px;  margin-top: 5px;  float: right;  }
     </style>
    <script src="jquery-1.7.2.min.js"></script>
    <script>
        $(function () {
            $(function () {
                $('#push').click(function(){
                    var value = $('textarea').val();
                    value = $.trim(value);     // 将空格删除
                    if(value==''){
                        alert('你丫的不输入东西，怎么发布啊')
                    }else{
                        var newData = $('<li><span>'+ value +'</span><button>X</button></li>');
                        $('.all ul').prepend(newData);
                        $('.all ul li:first').hide().slideDown();
                        $('textarea').val('');
                    }
                });
                $('.all ul').on('click','button',function(){
                    $(this).parent().remove();
                })
            });
        });
    </script>
</head>
<body>
    <div class="all">
        <span>微博发布</span>
        <textarea></textarea>
        <button id="push">发布</button>
        <ul></ul>
    </div>
</body>
</html>